02. All HTML Pages

• index.html for Home Page
• index-2.html for Home Page 2
• index-3.html for Home Page 3
• index-4.html for Home Page 4

03. Fonts

Go to Google Fonts and select your favorite fonts and then just replace the code or you can use any custom fonts like bellow.

      <!--Google Fonts-->
      
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;400;500;600;700;800;900&display=swap'); 
    

05. Source File (CSS)

All required css files have been linked like below-

<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/all.min.css">
<link rel="stylesheet" href="assets/css/icofont.min.css">
<link rel="stylesheet" href="assets/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/odometer.css">
<link rel="stylesheet" href="assets/css/lightcase.css">
<link rel="stylesheet" href="assets/css/style.css">
    

06. Source File (JS)

All required css files have been linked like below. if you need any customization in JAVASCRIPT you have to edit the main.js file.

<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/swiper.min.js"></script>
<script src="assets/js/jquery.counterup.min.js"></script>
<script src="assets/js/circularProgressBar.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/viewport.jquery.js"></script>
<script src="assets/js/odometer.min.js"></script>
<script src="assets/js/lightcase.js"></script>
<script src="assets/js/functions.js"></script>
    

Menu Bar with logo

Bio has two different menu for mobile and desktop. Each of the menu code are very similar.

<div class="menu">
    <ul>
        <li><a href="#home" class="active">Home</a></li>
        <li><a href="#benefit">Benefits</a></li>
        <li><a href="#htu">How to use</a></li>
        <li><a href="#product">Other Product</a></li>
        <li><a href="#review">Review</a></li>
    </ul>
    <div class="header__btn">
        <a href="shop.html" class="lab-btn">Shop Now</a>
    </div>
</div>
    

Here is your main logo code. To add your logo, replace logo.png from images/logo/ directory with your logo in PNG format.

<div class="logo">
    <a href="index.html">Haldaa</a>
</div>
            

To change the menu name you will need to edit in the tag <li><a href="#">menu name </a> </li> and add your text in the middle of the tag.

Section Styles

Here is your section structure.

<section class="section__name padding-tb">
    <div class="container">
        <div class="section__header">
          ....
        </div>
        <div class="section__wrapper">
            <div class="row">
              ....
            </div>
        </div>
    </div>
</section>
    

In the class="section__name" you can replace with your desired class.

the class padding-tb is the space between each sections.

And in the section-header div you can add your heading of sections and tagline of sections.

You can add your content on the 2nd .section-wrapper div.

Utility Classes

You can use next modification classes to set block margins and paddings:

mt-1 ... mt-5

mb-1 ... mb-5

pt-1 ... pt-5

pb-1 ... pb-5

08. Change Copyright

You Can Change Your Copyright text by changing footer sections copyright part like below-

<div class="text-center">
    <p>© Copyright & Design By <a href="index.html">PixiansStudioUIUX</a> - 2023</p>
</div>
    

Support

If you face any kinds of problems with our template or you have any questions, please feel free to contact us- support@labartisan.net